<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三方插件</title>
  </head>

  <body>
    <div id="app">
      <h2 v-text='msg'></h2>
      <h2 v-upper-text="msg"></h2>
      <h2 v-lower-text="msg"></h2>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false;

    //2.应该在new实例对象之前就讲属性添加到vm实例对象上去
    //像Vue的原型上添加一个$now属性，值为当前时间，$now是给vm用的
    Vue.prototype.$now = Date.now(); //放的是毫秒数进去
    // Vue.prototype.$now = new Date().toLocaleString(); //2021/7/5下午9:26:06
    Vue.prototype.$now = new Date().toTimeString(); //21:27:09 GMT+0800 (中国标准时间)

    // 3.定义一个全局指令：-upper-text
    Vue.directive('upper-text', function (el, binding) {
      // console.log(el); //实体DOM
      // console.log(binding); //虚拟DOM
      el.innerText = binding.value.toUpperCase();
    })

    // 4.向Vue添加一些东西
    Vue.showInfo = function () {
      console.log("展示一下信息");
    }


    const vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "helloWorld",
        }
      },
    })
    //1.当往这里的vm对象加上$now时，vm实例对象已经解析完毕，晚了;应该在vm实例的原型上添加才可以
    // vm.$now = Date.now();
  </script>

</html>